$row-prefix-cls: $css-prefix +'row';
$col-prefix-cls: $css-prefix +'col';

@mixin make-row($gutter: $grid-gutter-width) {
  position: relative;
  margin-left: ($gutter / -2);
  margin-right: ($gutter / -2);
  height: auto;
  //.clearfix;
  //@include clearfix;

}

@mixin make-grid($class: '') {
  @include float-grid-columns($class);
  @include loop-grid-columns($grid-columns, $class);
}

@mixin float-grid-columns($class) {
//  .col($index) { // initial
//  @item: ~".@{col-prefix-cls}-span@{class}-@{index}";
//  .col((@index + 1), @item);
//}
//  .col(@index, @list) when (@index =< @grid-columns) { // general
//  @item: ~".@{col-prefix-cls}-span@{class}-@{index}";
//  .col((@index + 1), ~"@{list}, @{item}");
//}
//  .col(@index, @list) when (@index > @grid-columns) { // terminal
//  @{list} {
//  float: left;
//  flex: 0 0 auto;
//}
//}
//  .col(1); // kickstart it
}

@mixin loop-grid-columns($index:2,$class) {
  @if ($index>0) {
    .#{$col-prefix-cls}-span#{$class}-#{$index} {
      display: block;
      width: ($index / $grid-columns)*100%
    }
    .#{$col-prefix-cls}#{$class}-push-#{$index} {
      left: ($index / $grid-columns)*100%
    }
    .#{$col-prefix-cls}#{$class}-pull-#{$index} {
      right: ($index / $grid-columns)*100%
    }
    .#{$col-prefix-cls}#{$class}-offset-#{$index} {
      margin-left: ($index / $grid-columns)*100%
    }
    .#{$col-prefix-cls}#{$class}-order-#{$index} {
      order: $index;
    }
  } @else {
      @include loop-grid-columns(($index - 1), $class);
  }

}

@mixin loop-grid-columns($index, $class) {
  @if ($index==0) {
    .#{$col-prefix-cls}-span#{$class}-#{$index} {
      display: none;
    }
    .#{$col-prefix-cls}#{$class}-push-#{$index} {
      left: auto;
    }
    .#{$col-prefix-cls}#{$class}-pull-#{$index} {
      right: auto;
    }
    .#{$col-prefix-cls}#{$class}-offset-#{$index} {
      margin-left: 0;
    }
    .#{$col-prefix-cls}#{$class}-order-#{$index} {
      order: 0;
    }
  }
}
